<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车_慕课网</title>
    <link rel="shortcut icon" href="./img/favicon.ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2493535_36bb35iahm9.css?spm=a313x.7781069.1998910419.46&file=font_2493535_36bb35iahm9.css">
    <link rel="stylesheet" href="./css/shoppingCart.css">
</head>

<body>
    <!-- 弹出层和弹出框 -->
    <div id="popLayer">
    </div>
    <!-- 没勾选 -->
    <div id="popBox">
        <p>请选择你需要的课程</p>
        <p><a href="" class='ok'>确定</a></p>
    </div>

    <header>
        <nav class="navbar navbar-default">
            <div class="container1">
                <div>
                    <ul class="nav1">
                        <li><a href="./index.html">慕课网首页</a></li>
                        <li><a href="">免费课</a></li>
                        <li><a href="">实战课</a></li>
                        <li><a href="">体系课</a></li>
                        <li><a href="">慕课教程</a></li>
                        <li><a href="">专栏</a></li>
                        <li><a href="">手记</a></li>
                    </ul>
                    <div class="search">
                        <div class="show_search">
                            <input type="text" name="" id="search_input" placeholder="请输入关键字..." class="form-control">
                            <div class="btndv">
                                <a href="">Vue</a>
                                <a href="">Python</a>
                                <div class="btn">
                                    <a href=""><i class="glyphicon glyphicon-search"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="btn" id='originBtn'>
                            <a href=""><i class="glyphicon glyphicon-search"></i>
                            </a>
                        </div>
                    </div>
                    <ul class="nav1 nav2">
                        <li class="collection">
                            <a href="">收藏网站</a>
                            <p class="tips">使用<span>Ctrl+D</span>可将网站添加到书签</p>
                        </li>
                        <li class="cart-li"><a href="./shoppingCart.html" class="
                            glyphicon glyphicon-shopping-cart"></a>
                            <div class="cart-box">
                                <div class="topContent">
                                    <span class='cart-title'>我的购物车</span>
                                    <span class='joinNum'>已加入0门课程</span>
                                </div>
                                <div class="cart-content">
                                    <div class="glyphicon glyphicon-shopping-cart"></div>
                                    <p>购物车里空空如也</p>
                                    <p class='pick'>快去这里选择你中意的课程</p>
                                    <a href="" class='ke'>实战课</a>
                                    <a href="" class='ke'>体系课</a>
                                </div>
                                <div class="cart-bottom">
                                    <a class='Mycenter'>我的订单中心</a>
                                    <a href="" class='goCart'>去购物车</a>
                        </li>

                        <!-- 登录后 -->
                        <li><a href="" class="glyphicon glyphicon-bell bell"></a></li>
                        <li><a href="" class='course'>我的课程</a></li>
                        <li class="astar"><a href="">
                                <img src="./img/astar.jpg" alt="">
                            </a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main class='mainBGC'>
        <div class="cartHeader">
            <div class="myCart">
                <div class='leftMyCart'>
                    <h1>我的购物车</h1>
                    <p class='selectNum'>共 <span id='courseNum'>2</span> 门,已选择 <span id='selectNum'>2</span> 门</p>
                </div>


                <p>
                    <a href="">我的订单历史</a>
                </p>

            </div>
        </div>
        <div class="cartBody">
            <p class='noData'>
                购物车内空空如也
            </p>
            <div class="trueCart">
                <div class="cartheader">
                    <div class="allSelect">
                        <i class='iconfont icon-quanxuan-weixuanzhong'></i>
                        全选
                    </div>
                    <div>
                        课程
                    </div>
                    <div>
                        金额
                    </div>
                    <div>
                        操作
                    </div>
                </div>
                <div class="haveData">

                </div>
                <div class="cartFooter">
                    <div class='rightSum'>
                        <span class='labelSum'>总计金额</span>
                        <span class='price'>￥0.00</span>
                        <a href="" class='pay'>去结算</a>
                    </div>
                </div>
            </div>

        </div>
    </main>

    <aside class='rightAside'>
        <ul>
            <li><a href="">
                    <i class='glyphicon glyphicon-comment'></i>
                    <span>意见反馈</span>
                </a>
            </li>
            <li><a href="">
                    <i class='glyphicon glyphicon-question-sign'></i>
                    <span>帮助中心</span>
                </a>
            </li>
            <li><a href="">
                    <i class="
    glyphicon glyphicon-phone"></i>
                    <span>APP下载</span>
                    <div class="AppDownLoad">
                    </div>
                </a>
            </li>
            <li><a href="">
                    <i class='iconfont icon-weixin'></i>
                    <span>官方微信</span>
                    <div class="WeiXinGF">
                    </div>
                </a>
            </li>
        </ul>
    </aside>

    <footer>
        <ul class='footerUL'>
            <li><a href="">企业服务</a></li>
            <li><a href="">关于我们</a></li>
            <li><a href="">联系我们</a></li>
            <li><a href="">讲师招募</a></li>
            <li><a href="">帮助中心</a></li>
            <li><a href="">意见反馈</a></li>
            <li><a href="">慕课大学</a></li>
            <li><a href="">代码托管</a></li>
            <li><a href="">友情链接</a></li>
        </ul>
        <p>Copyright©&nbsp; 2021 imooc.com&nbsp;&nbsp; <a href=""> 京ICP备 12003892号-11 </a>&nbsp;<a href=""><img
                    src="./img/beianicon.png" alt=""> &nbsp;京公网安备11010802030151号</a> &nbsp;<a href="">营业执照</a></p>
        <div class="someLink">
            <div><i class='iconfont icon-shoucang activeI'></i>
                <p>收藏网站</p>
                <div class='SCtips'>
                    使用<b>Ctrl+D</b>可将网站添加到书签
                </div>
            </div>
            <div><i class='iconfont icon-weixin'></i>
                <p>官方公众号</p>
                <div class='weixin'>

                </div>
            </div>
            <div><i class='iconfont icon-weibo'></i>
                <p>官方微博</p>
            </div>
            <div><i class='iconfont icon-qq'></i>
                <p>官方空间</p>
            </div>
        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src='./js/shoppingCart.js'></script>
</body>

</html>